<template>
  <a-modal
    title="新增"
    :maskClosable="false"
    :width="1050"
    placement="right"
    :closable="true"
    @cancel="onClose"
    :footer="null"
    :visible="agentInfoAddVisiable"
  >
    <a-form :form="form">
    <a-row>基本信息</a-row>
      <a-row>
        <a-col :md="12" :sm="24"
          ><a-form-item label="代理机构代码" v-bind="formItemLayout">
            <a-input
              disabled="true"
              v-decorator="[
                'agentCode',
                { rules: [{ required: true, message: '不能为空' }] },
              ]" /></a-form-item
        ></a-col>
        <a-col :md="12" :sm="24"
          ><a-form-item label="代理机构名称" v-bind="formItemLayout">
            <a-input
              v-decorator="[
                'agentName',
                { rules: [{ required: true, message: '不能为空' }] },
              ]"
            /> </a-form-item
        ></a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="代理机构简称" v-bind="formItemLayout">
            <a-input
              v-decorator="[
                'agentSimpleName',
                { rules: [{ required: true, message: '不能为空' }] },
              ]"
            />
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label="上级管理机构" v-bind="formItemLayout">
            <a-input
              disabled="true"
              v-decorator="['manageInstId']"
            /> </a-form-item
        ></a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24"
          ><a-form-item label="机构证件类型" v-bind="formItemLayout">
            <a-select v-decorator="['licenceType']" @change="handleChange">
              <a-select-option value="00"> 营业执照 </a-select-option>
              <a-select-option value="01"> 机构信用代码证 </a-select-option>
              <a-select-option value="02"> 民办非企业登记证书 </a-select-option>
              <a-select-option value="03"> 全国组织机构代码证 </a-select-option>
              <a-select-option value="04"> 事业单位法人证书 </a-select-option>
              <a-select-option value="05"> 境外企业证书 </a-select-option>
              <a-select-option value="06">
                社会团体法人登记证书
              </a-select-option>
              <a-select-option value="07"> 工会法人资格证书 </a-select-option>
              <a-select-option value="08"> 政府批文 </a-select-option>
              <a-select-option value="09"> 预先核准通知书 </a-select-option>
              <a-select-option value="10"> 其他批文或证明 </a-select-option>
              <a-select-option value="11"> 贷款卡号 </a-select-option>
              <a-select-option value="99"> 其他 </a-select-option>
            </a-select>
          </a-form-item></a-col
        >
        <a-col :md="12" :sm="24"
          ><a-form-item label="统一社会信用代码" v-bind="formItemLayout">
            <a-input v-decorator="['licenceCode']" /> </a-form-item
        ></a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24"
          ><a-form-item label="代理商法人姓名" v-bind="formItemLayout">
            <a-input v-decorator="['artifName']" /> </a-form-item
        ></a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label="法人证件类型" v-bind="formItemLayout">
            <a-select v-decorator="['artifCertType']" @change="handleChange">
              <a-select-option value="01"> 身份证 </a-select-option>
              <a-select-option value="02"> 军官证 </a-select-option>
              <a-select-option value="03"> 护照 </a-select-option>
              <a-select-option value="04"> 户口簿 </a-select-option>
              <a-select-option value="05"> 士兵证 </a-select-option>
              <a-select-option value="06"> 港澳来往内地通行证 </a-select-option>
              <a-select-option value="07">
                台湾同胞来往内地通行证
              </a-select-option>
              <a-select-option value="08"> 临时身份证 </a-select-option>
              <a-select-option value="09"> 外国人居留证 </a-select-option>
              <a-select-option value="10"> 警官证 </a-select-option>
              <a-select-option value="99"> 其他 </a-select-option>
            </a-select>
          </a-form-item></a-col
        >
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="法人证件编号" v-bind="formItemLayout">
            <a-input v-decorator="['artifCertNo']" /> </a-form-item
        ></a-col>
        <a-col :md="12" :sm="24"
          ><a-form-item label="法人手机号" v-bind="formItemLayout">
            <a-input v-decorator="['artifMobile']" /> </a-form-item
        ></a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="法人电子邮件" v-bind="formItemLayout">
            <a-input
              v-decorator="[
                'artifEmail',
                {
                  relus: [
                    {
                      max: 64,
                      message: '不能超过64位字符',
                    },
                  ],
                },
              ]"
            /> </a-form-item
        ></a-col>
        <a-col :md="12" :sm="24"
          ><a-form-item label="代理商联系人姓名" v-bind="formItemLayout">
            <a-input v-decorator="['contactName']" /> </a-form-item
        ></a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="联系人电话" v-bind="formItemLayout">
            <a-input v-decorator="['contactPhone']" />
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label="联系人邮箱" v-bind="formItemLayout">
            <a-input v-decorator="['contactEmaiil']" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="代理商邮编" v-bind="formItemLayout">
            <a-input v-decorator="['postCode']" />
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label="代理商地址" v-bind="formItemLayout">
            <a-input v-decorator="['agentAddr']" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="是否全行可见" v-bind="formItemLayout">
            <a-radio-group v-decorator="['isShowAllFlag']">
              <a-radio>是</a-radio>
              <a-radio>否</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label="是否参与分润" v-bind="formItemLayout">
            <a-radio-group v-decorator="['isProfitFlag']">
              <a-radio>是</a-radio>
              <a-radio>否</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="分润规则" v-bind="formItemLayout">
            <a-select v-decorator="['profitRule']">
              <a-select-option value="00">全产品统一分润</a-select-option>
              <a-select-option value="01">业务产品分润</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label="产品类型" v-bind="formItemLayout">
            <a-chexbox v-decorator="['baseProdProfitConfListMap']"> </a-chexbox>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>全产品统一分润</a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="分润类型" v-bind="formItemLayout">
            <a-select v-decorator="['profitInputModeALL']">
              <a-select-option value="01">固定金额</a-select-option>
              <a-select-option value="02">商户手续费百分比</a-select-option>
              <a-select-option value="03">成本差额百分比</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="固定金额值" v-bind="formItemLayout">
            <a-input
              v-decorator="[
                'profitFixedAmtALL',
                {
                  rules: [
                    { max: 16, message: '不超过16位字符' },
                    { reg: '^[0-9]+(.[0-9]{1,2})?$', message: '请符合规则' },
                  ],
                },
              ]"
            ></a-input
            >元
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label="固定金额费率模板" v-bind="formItemLayout">
            <a-input
              v-decorator="[
                'profitFixedIndexALL',
                { rules: [{ max: 32, message: '不超过32位字符' }] },
              ]"
            ></a-input>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="成本费率值" v-bind="formItemLayout">
            <a-input
              v-decorator="[
                'costFeeRateALL',
                {
                  rules: [
                    { max: 7, message: '不超过7位字符' },
                    {
                      reg: '^[1-9]?[0-9]?[0-9](\.[0-9]{0,3})?$',
                      message: '请符合规则',
                    },
                  ],
                },
              ]"
            ></a-input
            >‰
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label="费率封顶值" v-bind="formItemLayout">
            <a-input
              v-decorator="[
                'costCappingAmtALL',
                {
                  rules: [
                    { max: 8, message: '不超过8位字符' },
                    { reg: '^[0-9]+(.[0-9]{1,2})?$', message: '请符合规则' },
                  ],
                },
              ]"
            ></a-input
            >元
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="分润比例" v-bind="formItemLayout">
            <a-input
              v-decorator="[
                'profitScaleALL',
                {
                  rules: [
                    { max: 7, message: '不超过7位字符' },
                    {
                      reg: '^[1-9]?[0-9]?[0-9](\.[0-9]{0,3})?$',
                      message: '请符合规则',
                    },
                  ],
                },
              ]"
            ></a-input
            >‰
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label="分润封顶值" v-bind="formItemLayout">
            <a-input
              v-decorator="[
                'profitCappingAmtALL',
                {
                  rules: [
                    { max: 16, message: '不超过32位字符' },
                    { reg: '^[0-9]+(.[0-9]{1,2})?$', message: '请符合规则' },
                  ],
                },
              ]"
            ></a-input
            >元
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>结算信息配置</a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="结算方式" v-bind="formItemLayout">
            <a-select v-decorator="['settleType']">
              <a-select-option value="T1">T+1清算 </a-select-option>
              <a-select-option value="TN">T+N清算 </a-select-option>
              <a-select-option value="MT">按月清算 </a-select-option>
              <a-select-option value="ST">按季清算 </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label="结算周期" v-bind="formItemLayout">
            <a-select v-decorator="['settleType']">
              <a-select-option value="1">延迟</a-select-option>
              <a-select-option value="2">每月</a-select-option>
              <a-select-option value="3">每季</a-select-option>
            </a-select>
            <a-input  v-decorator="['settleCycle']"></a-input>日
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="结算账户类型" v-bind="formItemLayout">
            <a-select v-decorator="['settleAcctType']">
              <a-select-option value="00">本行借记账户 </a-select-option>
              <a-select-option value="02">本行存折 </a-select-option>
              <a-select-option value="03">本行内部户 </a-select-option>
              <a-select-option value="04">本行对公户 </a-select-option>
              <a-select-option value="10">他行借记账户 </a-select-option>
              <a-select-option value="12">他行存折 </a-select-option>
              <a-select-option value="13">他行内部户 </a-select-option>
              <a-select-option value="14">他行对公户 </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label="结算账号" v-bind="formItemLayout">
            <a-input v-decorator="['settleAcctNo']"></a-input>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="结算账户户名" v-bind="formItemLayout">
            <a-input v-decorator="['settleAcctName']"></a-input>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label="结算账号开户行号" v-bind="formItemLayout">
            <a-input  v-decorator="['acctOpenBankNo']"></a-input>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="结算账号开户行名称" v-bind="formItemLayout">
            <a-input disabled="true" v-decorator="['acctOpenBankName']"></a-input>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <div class="drawer-bootom-button">
      <a-button @click="handleSubmit" type="primary" :loading="loading"
        >保存
      </a-button>
      <a-button style="margin-left: 0.8rem" @click="onClose">取消</a-button>
    </div>
  </a-modal>
</template>
<script>
const formItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 15 },
};
export default {
  name: "AgentInfoAdd",
  props: {
    agentInfoAddVisiable: {
      default: false,
    },
  },
  data() {
    return {
      agentInfo: {},
      loading: false,
      roleData: [],
      formItemLayout,
      form: this.$form.createForm(this),
    };
  },
  methods: {
    reset() {
      this.loading = false;
      this.form.resetFields();
    },
    onClose() {
      this.reset();
      this.$emit("close");
    },
    handleSubmit() {
      this.form.validateFields((err, values) => {
        if (!err) {
          this.setAgentInfoFields();
          this.loading = true;
          this.agentInfo.roleId = this.agentInfo.roleId.join(",");
          // this.$post('agentInfo', {
          //   ...this.agentInfo
          // }).then((r) => {
          //   this.reset()
          //   this.$emit('success')
          // }).catch(() => {
          //   this.loading = false
          // })
        }
      });
    },
handleChange(){},
    setAgentInfoFields() {
      let values = this.form.getFieldsValue(["dstChannelId", "dstChannelName"]);
      if (typeof values !== "undefined") {
        Object.keys(values).forEach((_key) => {
          this.agentInfo[_key] = values[_key];
        });
      }
    },
  },
  watch: {},
};
</script>
